<template>
  <Modal v-model="isOpen" title="编辑角色" width="720px" :loading="loading" @on-ok="ok" @on-cancel="cancel">
    <Form ref="role" :model="role" :label-width="80">
      <FormItem label="角色名称" prop="name">
        <Input type="text" v-model="role.name" style="width: 60%;" />
      </FormItem>
      <FormItem label="角色状态" prop="status">
        <RadioGroup v-model="role.status" v-for="(status,idx) in this.$store.state.statusOptions.commons" :key="idx">
          <Radio :label="status.value"><span v-text="status.text"></span></Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="权限列表" prop="menu">
        <div id="menu">
          <CheckboxGroup v-for="menu in menus" :key="menu.id" v-model="roles">
            <Checkbox :label="menu.name"></Checkbox>
            <CheckboxGroup v-for="up_menu in menu.submenus" :key="up_menu.id" v-model="roles" style="margin-left:17px">
              <Checkbox :label="up_menu.name"></Checkbox>
              <div class="role">
                <CheckboxGroup v-model="roles" v-for="child_menu in up_menu.submenus" :key="child_menu.id" style="float:left;">
                  <Checkbox :label="child_menu.name" style="margin-left:34px"></Checkbox>
                </CheckboxGroup>
              </div>
            </CheckboxGroup>
          </CheckboxGroup>
        </div>
      </FormItem>
      <Spin size="large" fix v-if="isShowSpin"></Spin>
    </Form>
  </Modal>
</template>
<script>
  import role from '@/models/setting/sys/role'

  export default {
    name: 'edit-role',
    props: ['params'],
    data () {
      return {
        isOpen: true,
        loading: true,
        isShowSpin: true,
        role: {
          status: -1
        },
        roles: [],
        menus: []
      }
    },
    mounted () {
      this.loadMenus()
      this.load()
      setTimeout(() => {
        this.isShowSpin = !this.isShowSpin
      }, 1000)
    },
    methods: {
      load () {
        role.get(this.params.id).then(r => {
          if (r.code === 200) {
            this.roles = r.roles
            this.role = r.role
          } else {
            this.$Message.warning({
              content: r.msg,
              duration: 5,
              closable: true
            })
          }
        }).catch(r => {
          console.log(r)
        })
      },
      loadMenus () {
        role.getMenus().then(r => {
          if (r.code === 200) {
            this.menus = r.menus
          } else {
            this.$Message.warning({
              content: r.msg,
              duration: 5,
              closable: true
            })
          }
        }).catch(r => {
          console.log(r)
        })
      },
      ok () {
        this.loading = false
        let roles = {}
        this.menus.forEach((menu) => {
          if (this.roles.indexOf(menu.name) > -1) {
            roles[menu.id] = {
              name: menu.name,
              url: menu.url,
              icon: menu.icon,
              submenus: []
            }
          }
          menu.submenus.forEach((upMenu) => {
            if (this.roles.indexOf(upMenu.name) > -1) {
              roles[upMenu.up_id].submenus[upMenu.id] = {
                name: upMenu.name,
                url: upMenu.url,
                icon: upMenu.icon,
                submenus: []
              }
            }
            upMenu.submenus.forEach((childMenu) => {
              if (this.roles.indexOf(childMenu.name) > -1) {
                roles[childMenu.top].submenus[childMenu.up_id].submenus.push({
                  name: childMenu.name,
                  url: childMenu.url,
                  icon: childMenu.icon
                })
              }
            })
          })
        })
        role.update(this.role, JSON.stringify(roles)).then(r => {
          if (r.code === 200) {
            this.$emit('on-ok', {
              refresh: true
            })
            this.isOpen = !this.isOpen
            this.$Message.success({
              content: r.msg,
              duration: 5,
              closable: true
            })
          } else {
            this.loading = false
            this.$Message.warning({
              content: r.msg,
              duration: 5,
              closable: true
            })
          }
        }).catch(r => {
          this.loading = false
          this.$Message.error({
            content: r.msg,
            duration: 5,
            closable: true
          })
        })
      },
      cancel () {
        this.$emit('on-cancel', {
          refresh: false
        })
      }
    }
  }
</script>
<style>
  .role:after{display:block;clear:both;content:"";visibility:hidden;height:0}
</style>
